<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="icon" href="/img/favicon.png" type="image/png">
    <script src="libs/axios.min.js"></script>
    <script src="libs/vue.global.js"></script>
    <script src="libs/index.full.js"></script>
    <link rel="stylesheet" href="libs/index.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            background-image: url("img/登录背景图.jpg");
            background-size: cover;
            margin: 0;
        }

        .login-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            text-align: center;
        }


        .bottom-button {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;

            gap: 100px;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="login-container">
        <h2>登录</h2>
        <el-form class="form-container"  :model="form" :rules="rules" ref="loginForm" label-width="80px">
            <el-form-item v-if="selectedField === 'username'" label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item v-if="selectedField === 'email'" label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item v-if="selectedField === 'phone'" label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-radio-group v-model="selectedField" style="margin-bottom: 20px;">
                    <el-radio label="username">用户名</el-radio>
                    <el-radio label="email">邮箱</el-radio>
                    <el-radio label="phone">手机号</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <div class="bottom-button">
                    <el-button type="primary" @click="submitForm">登录</el-button>
                    <el-button type="primary" @click="register">注册</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</div>
<script>
    const {createApp} = Vue;
    const { ElMessage } = ElementPlus;
    createApp({
        data() {
            return {
                selectedField: 'username', // 默认选中“用户名”
                form: {
                    username: '',
                    email: '',
                    phone: '',
                    password: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        // {pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '用户名必须包含字母和数字', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '密码长度至少6位', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            //格式化时间
            getFormattedTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要 +1
                const day = String(now.getDate()).padStart(2, "0");
                const hours = String(now.getHours()).padStart(2, "0");
                const minutes = String(now.getMinutes()).padStart(2, "0");
                const seconds = String(now.getSeconds()).padStart(2, "0");
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            submitForm() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        const currentTime = this.getFormattedTime(); // 获取格式化时间

                        // 构造用户数据
                        const userData = {
                            username: this.form.username, // 用户名
                            password: this.form.password, // 密码
                            email: this.form.email, // 邮箱
                            phone: this.form.phone, // 手机
                            lastLoginTime: currentTime // 最近登录时间
                        };

                        // 发送登录请求
                        axios.post("http://localhost:8080/user/login", userData)
                            .then(response => {
                                if (response.data.code === 200) {
                                    ElMessage.success(response.data.message);
                                    axios.post("http://localhost:8080/visitLog/record")
                                        .then(response => {
                                            if (response.data.code === 200) {

                                            } else {
                                                ElMessage.error(response.data.message || "登录失败！");
                                            }
                                        })
                                        .catch(error => {
                                            ElMessage.error("服务器错误，请稍后再试！");
                                        });
                                    setTimeout(() => {
                                        window.location.href = "/index.html?noticeVisible=true"; // 跳转到主页
                                    }, 500);
                                } else {
                                    ElMessage.error(response.data.message || "登录失败！");
                                }
                            })
                            .catch(error => {
                                console.error("登录错误:", error);
                                ElMessage.error("服务器错误，请稍后再试！");
                            });
                    } else {
                        ElMessage.warning("请检查输入信息");
                    }
                });
            },
            register() {
                window.location.href = "http://localhost:8080/register.html";
            }
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>

</html>